<!--
 * @Author: pengyong
 * @Date: 2021-03-28 09:19:55
 * @LastEditors: pengyong
 * @LastEditTime: 2021-03-28 10:08:20
 * @Description: 搜索组件
 * @FilePath: /kuilong_web_new/src/views/serviceprovider/serviceorder/module/header.vue
-->
<template>
  <div class="head-container">
    <!-- 搜索 -->
    <!--
    <el-date-picker
      v-model="query.finishTimeStart"
      type="date"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      placeholder="结单开始时间"
      style="width: 200px"
      clearable
    />
    <el-date-picker
      v-model="query.finishTimeEnd"
      type="date"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      placeholder="结单结束时间"
      style="width: 200px"
      clearable
    />
    -->
    <el-input v-model="query.orderCode" class="search-item" clearable placeholder="工单编号" style="width: 200px;" @keyup.enter.native="toQuery" />
    <el-input v-model="query.customerName" class="search-item" clearable placeholder="客户名称" style="width: 200px;" @keyup.enter.native="toQuery" />
    <el-input v-model="query.supplierName" class="search-item" clearable placeholder="服务商名称" style="width: 200px;" @keyup.enter.native="toQuery" />
    <el-input v-model="query.taskAddr" class="search-item" clearable placeholder="详细地址" style="width: 200px;" @keyup.enter.native="toQuery" />
    <el-select v-model="query.status" clearable class="search-item" placeholder="工单状态">
      <el-option
        v-for="(item, index) in statusList"
        :key="item.label + index"
        :label="item.label"
        :value="item.value"
        clearable
        @change="toQuery"
      />
    </el-select>
    <el-button size="mini" class="search-item" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
    <!-- 下载 -->
    <div style="display: inline-block;margin: 0px 2px;">
      <el-button
        v-permission="['ADMIN','TSERVICEPROVIDERORDER_ALL','TSERVICEPROVIDERORDER_CREATE']"
        size="mini"
        type="primary"
        class="search-item"
        @click="handleExport"
      >
        导出excel
      </el-button>
    </div>
    <!-- 批量操作 -->
    <el-dropdown @command="handleCommand">
      <el-button type="primary" size="mini" class="search-item">
        批量操作<i class="el-icon-arrow-down el-icon--right" />
      </el-button>
      <el-dropdown-menu slot="dropdown" style="width:97px;">
        <el-dropdown-item command="end">结单</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { getDictDetails } from '@/api/dictDetail'

export default {
  props: {
    query: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      statusList: [{ 'label': '未结算', 'value': '0' }, { 'label': '已结算', 'value': '900' }]
    }
  },
  created() {
    // this.getOrderStates()
  },
  methods: {
    toQuery() {
      this.$parent.page = 0
      this.$parent.init()
    },
    handleExport() {
      this.$parent.exportExcel()
    },
    handleCommand(command) {
      this.$emit('click-drop', command)
    },
    getOrderStates() {
      getDictDetails('order_status').then(res => {
        this.statusList = res.content
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.head-container{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  .search-item {
    margin-left: 10px;
  }
}
</style>
